import stringRandom from "string-random";
import { Button, InputNumber, Switch, Space } from "antd";
import { useState } from "react";
import { message } from "antd";

export default () => {
    const [length, setLength] = useState(8);
    const [randomString, setRandomString] = useState("");
    const [numbers, setNumbers] = useState(true);
    const [letters, setLetters] = useState(true);
    const [specials, setSpecials] = useState(true);

    const genRandomString = () => {
        if (!numbers && !letters && !specials) return message.warn("请选择要包含的字符集");
        let str = stringRandom(length, { numbers, letters, specials });
        setRandomString(str);
    };

    return (
        <div style={{ padding: 20 }}>
            <Space>
                是否包含数字：
                <Switch checkedChildren="包含" unCheckedChildren="不包含" defaultChecked onChange={(checked) => setNumbers(checked)} />
                是否包含字母：
                <Switch checkedChildren="包含" unCheckedChildren="不包含" defaultChecked onChange={(checked) => setLetters(checked)} />
                是否包含特殊字符：
                <Switch checkedChildren="包含" unCheckedChildren="不包含" defaultChecked onChange={(checked) => setSpecials(checked)} />
            </Space>

            <Space style={{ marginTop: 30 }}>
                字符串长度：
                <InputNumber min={1} max={100} defaultValue={8} onChange={(value) => setLength(value)} />
                <Button type="primary" onClick={genRandomString}>
                    生成随机字符串
                </Button>
                <div style={{ marginTop: 10 }}>随机字符串：{randomString}</div>
            </Space>
        </div>
    );
};
